<template>
  <div>
    <div class="content-item">
      <div>
        <span class="label">房源位置：</span>
        <el-select v-model="queryParams.schoolAreaId"
                   placeholder="--校区--"
                   @change="cascade('campus')"
                   size="small">
          <el-option v-for="(item, index) in campus"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="queryParams.campusId"
                   placeholder="--园区--"
                   @change="cascade('gardens')"
                   size="small">
          <el-option v-for="(item, index) in gardens"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="queryParams.buildingId"
                   placeholder="--楼栋--"
                   size="small">
          <el-option v-for="(item, index) in buildings"
                     :key="index"
                     :label="item.number + '栋' + item.unitNumber + '单元'"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-input size="small"
                  style="width: 200px;"
                  placeholder="输入房间号"
                  v-intercept:param="queryParams.bedroomNum"
                  v-model.trim="queryParams.bedroomNum" />
      </div>
      <div class="g-mt10">
        <el-button size="small"
                   type="primary"
                   @click="query()">搜索
        </el-button>
        <el-button size="small"
                   @click="reset">重置
        </el-button>
        <el-button size="small"
                   @click="exportExcel">导出
        </el-button>
      </div>
    </div>
    <div class="content-item">
      <el-table :data="tableData"
                class="table-header-gray">
        <el-table-column label="序号"
                         type="index"></el-table-column>
        <el-table-column label="宿舍信息"
                         prop="bedroomInfo"></el-table-column>
        <el-table-column label="最近得分"
                         prop="latelyScore"></el-table-column>
        <el-table-column label="总次数(优)"
                         prop="perfect"></el-table-column>
        <el-table-column label="总次数(良)"
                         prop="good"></el-table-column>
        <el-table-column label="总次数(中)"
                         prop="middle"></el-table-column>
        <el-table-column label="总次数(差)"
                         prop="bad"></el-table-column>
        <el-table-column label="违章次数"
                         prop="violation"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span class="gtextlink"
                  @click="toDetail(scope.row)">详情</span>
          </template>
        </el-table-column>
      </el-table>
      <pagenation :dataLength="total"
                  :page="queryParams.page"
                  :pageSize="queryParams.size"
                  :handleSizeChange="handleSizeChange"
                  :handleCurrentChange="handleCurrentChange" />
    </div>
  </div>
</template>
<script>
import { pagination } from '@/tools/mixin'
import { exportFile } from '@/tools/utils'
import { listSchoolAreaByUserUsingGET, listCampusBySchoolAreaIdAndUserUsingGET, listBuildingByCampusIdAndUserUsingGET, listBedroomCheckUsingPOST } from '@api/auto'
export default {
  name: '',
  props: {
  },
  mixins: [pagination],
  components: {},
  data () {
    return {
      total: 0,
      queryParams: {
        size: 10,
        page: 1,
        schoolAreaId: null,
        campusId: null,
        buildingId: null,
        bedroomNum: null
      },
      campus: [],
      gardens: [],
      buildings: [],
      tableData: []
    }
  },
  created () { },
  mounted () {
    this.listSchoolArea()
    this.query()
  },
  methods: {
    init () {
      this.queryParams = {
        size: 10,
        page: 1,
        schoolAreaId: null,
        campusId: null,
        buildingId: null,
        bedroomNum: null
      }
      this.gardens = []
      this.buildings = []
    },
    // 查询所有校区
    listSchoolArea () {
      listSchoolAreaByUserUsingGET().then(res => {
        this.campus = res.data
      })
    },
    // 通过校区id查园区
    listCampusBySchool () {
      listCampusBySchoolAreaIdAndUserUsingGET(this.queryParams.schoolAreaId).then(res => {
        this.gardens = res.data
      })
    },
    // 通过园区id查楼栋
    listBuildingByCampusId () {
      listBuildingByCampusIdAndUserUsingGET(this.queryParams.campusId).then(res => {
        this.buildings = res.data
      })
    },
    cascade (type) {
      const actions = new Map([
        ['campus', 'changeCampus'],
        ['gardens', 'changeGardens']
      ])
      let temp = actions.get(type)
      this[temp]()
    },
    // 校区change
    changeCampus () {
      this.queryParams.campusId = ''
      this.queryParams.buildingId = ''
      this.gardens = []
      this.buildings = []
      this.listCampusBySchool()
    },
    // 园区change
    changeGardens () {
      this.queryParams.buildingId = ''
      this.buildings = []
      this.listBuildingByCampusId()
    },
    // 宿舍检查详情
    toDetail (data) {
      // do something
      this.$router.push({
        path: '/main/dormManage/dormCheck/detail',
        query: { id: data.bedroomId }
      })
    },
    exportExcel () {
      // let url = './api/bedroomCheck/export'
      // exportFile(url, this.queryParams, '寝室检查列表.xls')
      if (this.tableData.length) exportFile('./api/bedroomCheck/export', this.queryParams, '寝室检查列表.xls')
      else this.$message.error('数据为空，不能下载')
    },
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      if (!this.queryParams.bedroomNum) {
        this.queryParams.bedroomNum = null
      }
      listBedroomCheckUsingPOST(this.queryParams)
        .then(res => {
          this.total = (res.data && res.data.total) || 0
          this.tableData = (res.data && res.data.list) || []
        })
    },
    reset () {
      this.init()
      this.query()
    }
  }
}
</script>
<style lang='less' scoped>
</style>
